
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<style>
	
	.swiper-slide p{
		transform:translateX(-200px);
		opacity:0;
		transition:all .4s;}
	.ani-slide p{
		transform:translateX(0);
		opacity:1;
		}

    </style>
	<!-- swiper / 单页网页 start-->
	<!-- 文档地址 https://www.swiper.com.cn/api/ -->
	<div class="swiper-container" style="height: 100vh;width: 100%">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="display: flex;justify-content: center;align-items: center;background-color: #444;color: #fff;">
            	<p>Slide 1</p>
            </div>
            <div class="swiper-slide" style="display: flex;justify-content: center;align-items: center;background-color: #666;color: #fff;">
            	<p>Slide 2</p>
            </div>
            <div class="swiper-slide" style="display: flex;justify-content: center;align-items: center;background-color: #888;color: #fff;">
            	<p>Slide 3</p>
            </div>
        </div>
        <div class="swiper-pagination">
        	
        </div> 
	</div>

	<script type="text/javascript">
  		
	    var swiper = new Swiper('.swiper-container',{
			direction : 'vertical',//Swiper的滑动方向，可设置为horizontal或vertical。
			loop : true,//设置为true 则开启loop模式
			followFinger : true,//跟随手指。如设置为false，手指滑动slide时不会动，释放时slide才会切换。
			speed:800,//切换速度，即slider自动滑动开始到结束的时间（单位ms）
			mousewheel: true,//开启鼠标滑轮事件
			effect:'slide',//slide的切换效果，默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
			grabCursor :false,//设置为true,鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。
			pagination : {//添加分页器
				el:'.swiper-pagination',
				clickable :true,//开启分页器的点击事件
				bulletElement:'span',//设置生成的分页项的标签
				type: 'bullets',//分页器样式类型,可选bullets、fraction、progressbar、custom
				/*renderBullet: function (index, className) {//自定义圆点的方法
		          return `<span class='${className}' style="width:20px;height:20px;">${index}</span>`;
		        },*/
			},
			on:{
				//事件函数，初始化后执行
				init:function(swiper){
			        slide=this.slides.eq(0);
				    slide.addClass('ani-slide');
			    },
			    //回调函数，过渡开始时触发
				transitionStart: function(){
				    for(i=0;i<this.slides.length;i++){
				    	slide=this.slides.eq(i);
				        slide.removeClass('ani-slide');
					}
			    },
			    //回调函数，过渡结束时触发。
				transitionEnd: function(){
					slide=this.slides.eq(this.activeIndex);
				    slide.addClass('ani-slide');
			    },
			}
	    });
  	</script>
	<!-- swiper / 单页网页 end-->
	
